<template>
  <transition name="slide">
    <div class="article">
      <div class="scroll" id="Article" ref="wrapper">
        <div>
          <div class="module article_grp ">
            <div class="article_title">
              {{article.post_title}}
            </div>
            <div class="author_grp">
              <div class="img_grp">
                <img :src="article.avatar" alt="">
              </div>
              <section>
                <router-link tag="div" class="author" to="/my_page">{{article.author}}</router-link>
                <div class="release_time">发布于{{article.create_time }}</div>

                <div class="add_follow">
                  +关注
                </div>
              </section>
            </div>

            <div class="img_grp " id="cover">
              <img :src="article.article_img" alt="">
            </div>
            <div class="clear"></div>
            <div class="article_content" v-html="article.post_content">
              <!--{{article.post_content}}-->
            </div>

          </div>
          <recommend v-if="article"></recommend>
          <comment v-if="!article" :comment="comment" @changeType="changeType()"></comment>
          <div class="null"></div>
        </div>
      </div>
      <menu-bar v-if="!article" :article="article"></menu-bar>
      <input-comment v-show="isInput"></input-comment>
      <waiting v-if="!article"></waiting>
    </div>
  </transition>

</template>

<script>
  import {mapGetters, mapActions} from 'vuex'
  import Bscroll from "better-scroll"
  import Recommend from './components/recommend'
  import InputComment from './components/inputComment'
  import MenuBar from './components/menuBar'
  import Comment from './components/comment'
  import {ease} from "../../common/js/ease";
  import Waiting from 'components/loading/loading'
  import {getArticle, getArticleList} from "../../api/api";

  export default {
    name: 'Article',
    data() {
      return {
        article: {},
        aid: this.$route.params.aid,
        lastAid: '',
        scrollToEasing: 'bounce',
        commentObj: {
          aid: this.$route.params.aid,
          type: 1
        },
        recommend: [],
        isBack: true
      }
    },

    watch: {
      change() {
        this.scroll.scrollTo(0, 0, 0, ease[this.scrollToEasing])
        this.aid = this.change
        if (this.lastAid != this.aid) {
          this.lastAid = this.aid
          this.article = {}
          this._getArticle()
        }
      }
    },

    computed: {
      ...mapGetters(['getIsInput', 'getComment', 'getComment']),
      isInput() {
        return this.getIsInput
      },
      comment() {
        return this.getComment
      },
      change() {
        return this.$route.params.aid
      }
    },
    mounted() {
      let _this = this
      this._getArticle()
      this.scroll = new Bscroll(this.$refs.wrapper, {
        click: true,
      })
      this.lastAid = this.aid
      window.addEventListener("popstate", function (e) {
        if (_this.isBack) {
          _this.isBack = false
          _this.$router.push({path: `/articleColumn`})
        }
      }, false);
      // this.loadComment(this.commentObj)
    },
    methods: {
      ...mapActions(['loadComment']),
      _getArticle() {
        getArticle(this.aid).then((res) => {
          res = res.data
          if (res.data) {
            this.article = res.data
          }
        })
      },
      _getArticleList() {
        getArticleList(0, 0, 2).then((res) => {
          res = res.data
          if (res.data) {
            this.recommend = res.data
          }
        })
      },

      changeType(type) {

      }
    },

    // activated() {
    //   this.scroll.scrollTo(0, 0, 0, ease[this.scrollToEasing])
    //   this.aid = this.$route.params.aid
    //   if (this.lastAid != this.aid) {
    //     this.lastAid = this.aid
    //     this.article = {}
    //     this._getArticle()
    //   }
    // },
    components: {
      Recommend,
      Waiting,
      InputComment,
      Comment,
      MenuBar,

    }
  }
</script>

<style scoped>
  .scroll {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

  }

  .article {
    z-index: 30;
    background-color: #f5f4f7;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .article_grp {
    width: 100%;
    background: white;
    padding: 40px 25px 40px 25px;
    /*overflow: hidden;*/
  }

  .article_grp .article_title {
    font-size: 42px;
    line-height: 60px;
    color: black;
    font-weight: bold;
  }

  .author_grp {
    width: 100%;
    height: 80px;
    margin-top: 40px;
  }

  .article_grp .img_grp {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    float: left;
    border: solid 1px #e7e1cd;
    margin-right: 16px;
    overflow: hidden;
  }

  section {
    width: auto;
    height: 80px;
    position: relative;
  }

  .add_follow {
    position: absolute;
    right: 0;
    top: 15px;
    width: 100px;
    height: 50px;
    color: white;
    background: #059692;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    font-size: 26px;
  }

  .author {
    width: 400px;
    height: 30px;
    float: left;
    font-size: 26px;
    color: #333333;
  }

  .release_time {
    width: 400px;
    float: left;
    font-size: 24px;
    color: #c5c5c7;
    margin-top: 5px;
  }

  #cover {
    width: 100%;
    height: 360px;
    border-radius: initial;
    margin-top: 60px;
  }

  .article_content {
    margin-top: 47px;
    padding: 0 10px;
    color: #666;
    font-size: 28px;
    line-height: 1.79;
  }

  .other_grp span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    float: right;
  }

  .null {
    height: 100px;
  }

</style>
